<script setup>
import GoodsItem from '../home/componets/GoodsItem.vue';
import { onMounted, ref } from 'vue';
import { findTopCategoryAPI } from '@/api/category';
import { useRoute } from 'vue-router';
import { onBeforeRouteUpdate } from "vue-router"
import { useCategory } from '@/store/Category';
import { getBannerApi } from '@/api/banner';


//面包屑
const route = useRoute()
const categoryData = ref({})

const cateGory = async (id = route.params.id) => {
    const res = await findTopCategoryAPI(id)
    categoryData.value = res.result
}
onMounted(() => cateGory)

//路由缓存
onBeforeRouteUpdate((to) => {

    cateGory(to.params.id)


})
//轮播图
const Category = useCategory()
const isLoading = ref(false)
const error = ref(null)
const banner = ref([])

onMounted(async () => {

    isLoading.value = true
    try {
        //导航
        await Category.getData()

        //轮播图
        const res = await getBannerApi(); // await 会等待Promise完成
        banner.value = res.result;    // 然后获取数据
        // 确认数据后再检查DOM
        setTimeout(() => {
            const imgs = document.querySelectorAll('.banner-right img')
            //console.log("找到的img元素数量:", imgs) // 应该是5
            let currentIndex = 0
            setInterval(() => {

                imgs.forEach(item => {
                    item.style.display = "none"
                });
                imgs[currentIndex].style.display = "block"

                currentIndex = currentIndex + 1

                if (currentIndex >= imgs.length) {
                    currentIndex = 0
                }


            }, 2000)



        }, 200) // 稍等DOM渲染
    } catch (err) {
        error.value = err.message
        console.error("加载失败:", err)
    } finally {
        isLoading.value = false
    }
})



</script>

<template>
    <!--面包屑-->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">
            {{ categoryData.name || '加载中...' }}
        </el-breadcrumb-item>

    </el-breadcrumb>
    <!--轮播图-->
    <div class="banner-right">
        <div v-for="value in banner">
            <img :src="value.imgUrl" alt="">
        </div>

    </div>
    <!--全部分类-->
    <div class="sub-list">
        <h3>全部分类</h3>
        <ul>
            <li v-for="i in categoryData.children" :key="i.id">
                <RouterLink :to="`/category/sub/${i.id}`">
                    <img :src="i.picture" />
                    <p>{{ i.name }}</p>
                </RouterLink>
            </li>
        </ul>
    </div>
    <div class="ref-goods" v-for="item in categoryData.children" :key="item.id">
        <div class="head">
            <h3>- {{ item.name }}-</h3>
        </div>
        <div class="body">
            <GoodsItem v-for="good in item.goods" :goods="good" :key="good.id" />
        </div>
    </div>

</template>

<style scoped lang="scss">
// Breadcrumb styles
.el-breadcrumb {
    padding: 20px 0;
    font-size: 14px;

    &-item {
        &:last-child {
            font-weight: bold;
            color: #333;
        }
    }
}

// Banner styles
.banner-right {
    width: 80%;
    margin: 0 auto;
    height: 500px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;

        &:first-child {
            display: block;
        }
    }
}

// Category list styles
.sub-list {
    margin-bottom: 40px;

    h3 {
        font-size: 24px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    ul {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;

        li {
            text-align: center;
            transition: transform 0.3s;

            &:hover {
                transform: translateY(-5px);
            }

            a {
                color: #333;
                text-decoration: none;
            }

            img {
                width: 100%;
                height: 120px;
                object-fit: contain;
                margin-bottom: 10px;
                border-radius: 4px;
                background: #f5f5f5;
            }

            p {
                font-size: 14px;
            }
        }
    }
}

// Goods section styles
.ref-goods {
    margin-bottom: 40px;

    .head {
        margin-bottom: 20px;

        h3 {
            font-size: 22px;
            text-align: center;
            color: #666;
        }
    }

    .body {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }
}
</style>